iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

給心理人的前端網頁開發系列 第 3

[給心理人的前端網頁開發] 03 關卡〇:新手入門之說聲 Hello World

  • 分享至 

  • xImage
  •  

在剛開始學寫程式時,有個不成文的習慣:先讓螢幕顯示出 Hello World 這串文字,代表程式有在正常運作、讓新手知道自己已經能正式運行一個程式起來了,可能就會更有信心面對接下來的程式學習。這篇文章就是想讓一個新手,也能在五分鐘內就能讓螢幕顯示 Hello World 這串文字。

目標

  • 出現 hello world
  • 文字變紅,變大
  • 點擊按鈕,顯示彈出視窗

請注意,本系列文可能不會進行詳細的教學,但會提醒該注意的地方,以及盡量附上學習資源。

一、寫程式的環境

一般在打報告時,我們會打開文書處理軟體,例如 Office Word 或是 Google Docs。而在寫程式呢?則是會打開文字編輯器(Text Editor)、或是整合式開發環境(IDE)。

在關卡〇,為了快速寫出 Hello World,我們先不深入研究如何設定開發環境,而是直接使用 Codepen 這個線上服務。Codepen 是一個專門讓使用者編寫 HTML、CSS、JavaScript,用來快速展示網頁的服務。

請參考以下教學資源,了解 Codepen 如何使用

二、Hello World 程式碼

請依照這個 Codepen 的程式碼,也建立出自己的一個 Codepen,並將程式碼貼上

// HTML
<div>Hello World!</div>
<button>Click Me</button>

// CSS
div {
  color: red;
  font-size: 108px;
}

// JavaScript
const button = document.querySelector('button')
button.addEventListener('click', alertSomething)

function alertSomething() {
  window.alert('哈囉你好嗎')
}

檢核點:當貼上這些程式碼後,需要得到以下的效果

  • 出現 hello world
  • 文字變紅,變大
  • 點擊按鈕,顯示彈出視窗

我將在後續文章解釋這些程式碼的意義

小結

今天為了寫出 Hello World,介紹了 Codepen 線上服務能快速產生出一個網頁。也寫了一個 Hello World 頁面,能快速體驗 HTML、CSS、JavaScript 的用途。明天將從 HTML 的程式碼開始介紹。


上一篇
[給心理人的前端網頁開發] 02 背景知識介紹
下一篇
[給心理人的前端網頁開發] 04 關卡〇:簡介 HTML
系列文
給心理人的前端網頁開發20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言